<template>
    <view>
        <!--<nui-step :step="3" :class="{ pt40: isSign }"></nui-step>-->
        <text class="loading-box" v-if="isShowLoading">
            <u-loading mode="circle" size="150" color="#2b85e4"></u-loading>
            <view class="text">协议生成中，请稍后···</view>
        </text>

        <view class="pdf-box" :class="{ h80: !isSign }">
            <show-pdf class="iframe" ref="pdf" v-for="i in numPages" :key="i" :src="url" :page="i"></show-pdf>
        </view>

        <text v-if="isSign == 'N'" class="fixed">
            <text class="tips">提示：手指上下滑动查看更多内容。</text>
            <u-button type="primary" shape="square" :ripple="true" size="medium" class="custom-btn" @click="goSign">前往签名
            </u-button>
        </text>

<!--        <text v-else class="fixed">-->
<!--            <u-button type="primary" shape="square" :ripple="true" size="medium" class="custom-btn" @click="toPath">下一步-->
<!--            </u-button>-->
<!--        </text>-->
    </view>
</template>

<script>
import ShowPdf from "vue-pdf";
import { mapGetters } from "vuex"
import AuthInfo from "@/utils/authInfo.js";
import { getQueryString } from "@/utils/index.js";
import CMapReaderFactory from "vue-pdf/src/CMapReaderFactory.js";
import Api from "@/api/index.js";
import store from "@/store";
import * as consts from "@/utils/constant.js";
export default {
    data() {
        return {
            isShowLoading: true,
            url: "", //https://pdf-lib.js.org/assets/with_update_sections.pdf http://xsd.jluomi.com/xsdcrm-wechat-ui/1.pdf
            numPages: null, // pdf 总页数,
            deptId: null,
            isSign:'N',
            isSuccess:false,
            wx_code:false,
            inductionId:0
        };
    },
    components: {
        ShowPdf,
    },
    async onLoad(option){
      let inductionId = option.inductionId
      this.inductionId = option.inductionId
      let refresh = uni.getStorageSync("refresh");
      if (refresh == "1") {
        uni.setStorageSync("refresh", "");
        window.location.reload();
      }
      await this.getPdf(inductionId);
    },
    async mounted() {

    },
    methods: {
        async getPdf(inductionId) {
          let { data } = await this.$api.riders.getloadSignPDF({inductionId:inductionId});
          if (data.pdfPath == "") {
            let { code, msg } = await this.$api.riders.renewalRegenerate({inductionId:inductionId});
            if (code != 200) {
              uni.showToast({
                title: msg,
                icon: "error",
              });
              return false;
            }
            this.getPdf()
            return
          } else if (data.isSign == "Y") {
            this.isSign=data.isSign
          }
            this.url = data.pdfPath;
            this.getNumPages(data.pdfPath);
            this.showTopTips();
        },
        showTopTips() {
            if (this.isSign == "Y") {
                this.$refs.uTips.show({
                    title: "签约成功",
                    type: "success",
                    duration: "230000",
                });
            }
        },
        goSign() {
            console.log("inductionId====>",this.inductionId)
            this.$u.route("pages/sign/webIndex2?inductionId="+this.inductionId);
        },
        //计算pdf页码总数
        getNumPages(url) {
            let loadingTask = ShowPdf.createLoadingTask(url);
            loadingTask.promise
                .then((pdf) => {
                    this.numPages = pdf.numPages;
                    setTimeout(() => {
                        this.isShowLoading = false;
                    }, 1500);
                })
                .catch((err) => {
                    uni.showToast({
                        title: "协议加载失败",
                        icon: "error",
                    });
                });
        },
    }
};
</script>

<style lang="scss" scoped>
uni-page-body {
    height: 100%;
}

.u-tips {
    height: auto;
}

.pdf-box {
    position: absolute !important;
    top: 120px;
    height: 68vh;
    overflow-y: scroll;
}

.tips {
    position: absolute;
    bottom: 50px;
    margin: 15px auto;
    left: 50%;
    transform: translateX(-50%);
    width: 80%;
    font-size: 12px;
    color: #666;
    width: 100%;
    text-align: center;
}

.custom-btn {
    position: absolute;
    bottom: 10px;
    margin: 15px auto;
    left: 50%;
    transform: translateX(-50%);
}

.loading-box {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    text-align: center;

    .text {
        margin-top: 10px;
    }
}

.fixed {
    position: fixed;
    width: 100%;
    height: 90px;
    bottom: 0;
    background: #fff;
    border-top: 1px solid #e1e1e1;
}

.pt40 {
    padding-top: 50px;
}

.h80 {
    height: 73vh !important;
}
.pdf-box{
  top: 60px;
  height: 80vh;
  width: 100%;
}
</style>
